<template>
  <div class="player-frame">
    <div class="video-selector">
      <template v-if="isPlayback">
        <div class="title">时间范围</div>
        <date-picker-group v-model="timeRange" :placeholder="['开始时间', '结束时间']" @change="onDateChange" />
      </template>
      <div class="title" style="margin-top: 15px">监控</div>
      <collapse-panel-search
        :data-source="videoSource"
        :replace-fields="{ key: 'monitor_id', searchKey: 'monitor_name' }"
        style="height: calc(100% - 157px)"
      >
        <template #default="{ itemData }">
          <div
            class="monitor-item"
            :class="{ active: itemData[fieldsKey] === selectValue }"
            @click="onMonitorSelect(itemData)"
          >
            {{ itemData.monitor_name }}
          </div>
        </template>
      </collapse-panel-search>
    </div>
    <div class="video-container">
      <slot />
    </div>
  </div>
</template>

<script>
import message from 'ant-design-vue/es/message/index.js';
import dayjs from 'dayjs';
import DatePickerGroup from './components/date-picker-group.vue';
import CollapsePanelSearch from './components/collapse-panel-search.vue';

export default {
  name: 'PlayerFrame',
  inheritAttrs: false,
  components: {
    CollapsePanelSearch,
    DatePickerGroup,
  },
  props: {
    /* value: { cameraCode: "",startTime: "",endTime: "" } */
    value: { type: Object, default: () => ({}) },
    dataSource: { type: Object, default: () => ({}) },
    fieldsKey: { type: String, default: 'pull_flow_conditions' },
    isPlayback: { type: Boolean, default: true },
  },
  data() {
    return {
      timeRange: [],
      timeRangeStore: {},
      selectValue: '',
    };
  },
  computed: {
    videoSource() {
      return Object.keys(this.dataSource).reduce((res, key) => {
        return [].concat(res, [{ title: key, children: this.dataSource[key] }]);
      }, []);
    },
  },
  created() {
    const value = (typeof this.value === 'object' && this.value) || {};
    this.selectValue = value.cameraCode;
    if (this.isPlayback === true) {
      this.timeRange = [
        value.startTime ? dayjs(value.startTime) : dayjs().subtract(10, 'minute'),
        value.endTime ? dayjs(value.endTime) : dayjs(),
      ];
    }
    this.output();
  },
  methods: {
    output() {
      const data = {
        cameraCode: this.selectValue,
      };
      if (this.isPlayback === true) {
        data.startTime = this.timeRange[0];
        data.endTime = this.timeRange[1];
        if (data.startTime && data.endTime) {
          this.$emit('input', data);
        }
      } else {
        this.$emit('input', data);
      }
    },
    onDateChange() {
      if (this.selectValue) {
        this.timeRangeStore[this.selectValue] = this.timeRange.slice();
      }
      this.output();
    },
    onMonitorSelect(data) {
      // console.log(data);
      const val = data[this.fieldsKey];
      if (!val) {
        return message.error('该监控未配置拉流条件！');
      }
      /* 需求: 始终只显示一个监控为选中状态 */
      if (val !== this.selectValue) {
        this.setSelectValue(val);
        this.output();
      }
    },
    setSelectValue(value) {
      this.selectValue = value;
      if (this.timeRangeStore[this.selectValue]) {
        this.timeRange = this.timeRangeStore[this.selectValue].slice(0);
      } else {
        this.timeRangeStore[value] = this.timeRange.slice();
      }
      this.output();
    },
    delSelectValue(value) {
      if (value && this.timeRangeStore[value]) {
        delete this.timeRangeStore[value];
      }
      if (value === undefined || value === this.selectValue) {
        this.selectValue = '';
        this.output();
      }
    },
  },
};
</script>

<style lang="less">
.player-frame {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  height: 600px;
}
.video-selector {
  flex: none;
  width: 300px;
  height: 100%;
  padding: 20px;
  .title {
    margin-bottom: 7px;
    font-size: 18px;
    color: #ffffff;
  }
  .monitor-item {
    position: relative;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
    &:hover,
    &.active {
      color: rgba(132, 255, 237, 0.75);
      background: rgba(0, 0, 0, 0.15);
    }
  }
}
.video-container {
  flex: auto;
  width: 1070px;
  height: 100%;
}
</style>
